<template>
  <div class="tableSearch" ref="tableSearch" :style="{ height: isShowMoreSearch ? 'auto' : '42px' }">
    <div class="iptContainer" ref="iptContainer">
      <slot name="leftContent"></slot>
    </div>
    <div class="btnContainer" ref="btnContainer">
      <!-- <slot name="rightContent"></slot> -->
      <el-button v-if="searchBtn" size="small" type="primary"  @click="$emit('search')">查询</el-button>
      <el-button v-if="resetBtn" size="small" plain @click="$emit('reset')">重置</el-button>
    </div>
    <div class="foldBtn" @click="isShowMoreSearch = !isShowMoreSearch" v-if="isMore">
      <i class="el-icon-d-arrow-left" :class="{ changeNav: isShowMoreSearch }"></i>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TableSearch',
  props: {
    searchBtn: { default: true },
    resetBtn: { default: true },
  },
  data() {
    return {
      isMore: false,
      isShowMoreSearch: false
    }
  },
  mounted() {
    this.changeContentWidth()
    window.onresize = () => {
      this.changeContentWidth()
    }
  },
  beforeDestroy() {
    window.onresize = null
  },
  methods: {
    changeContentWidth() {
      const boxWidth = this.$refs.tableSearch?.offsetWidth
      const children = this.$refs.iptContainer?.children
      let widthSum = 0;
      for (let i = 0; i < children.length; i++) {
        widthSum += children[i].offsetWidth + 8;
      }
      this.isMore = boxWidth > (widthSum + 138) ? false : true
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-input {
    width: 200px;
  }
}

.tableSearch {
  // margin-bottom: 8px;
  display: flex;
  overflow: hidden;

  .iptContainer {
    * {
      flex: 1;
      margin-right: 8px;
      margin-bottom: 8px;
      vertical-align: text-top;
    }
  }

  .btnContainer {
    margin-left: 8px;
    width: 140px;
    flex-shrink: 0;
  }

  .foldBtn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 2px;
    border: 1px solid #dcdfe6;
    margin-left: 8px;
    cursor: pointer;
    flex-shrink: 0;

    .el-icon-d-arrow-left {
      transform: rotate(-90deg);
    }

    .changeNav {
      transform: rotate(90deg) !important;
    }
  }
}
</style>
